<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    :title="isAdd?'新增管理员':'修改管理员'"
    :visible.sync="isEdit"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="120px"
      size="small"
      class="form-box"
    >
      <el-form-item label="真实姓名" prop="real_name">
        <el-input type="text" v-model="form.real_name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="form.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item  label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="角色组" >
        <el-select v-model="form.group_id" clearable placeholder="请选择">
          <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input type="text" v-model.number="form.phone" maxlength="11" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="is_status"></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import adminApi from "@/api/admin";
@Component({
  components: {}
})
export default class typeEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  @Prop(Boolean) isEdit!: boolean;
  @Prop(Boolean) isAdd!: boolean;
  @Prop(Boolean) isStatus!: boolean;
  @Provide() is_status:  boolean = false;
  @Prop(Object) form!: {
    id:number,
    username:string,
    password: string,
    real_name: string,
    type:string,
    phone:string,
    status:number,
    group_id:number,
  };
  @Provide() rules: any = {
    real_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入	密码", trigger: "blur" }],
    type: [{ required: true, message: "请输选择类型", trigger: "change" }],
    phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    group_id: [{ required: true, message: "请选择管理员所属角色", trigger: "blur" }],
  };
  @Provide() groupList: any = [];
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
          this.form.type='admin';
          if(this.is_status==true){
            this.form.status=1
          }else{
            this.form.status=0
          }
          if(this.check) {
            let _this = this
            _this.check = false
            adminApi.saveAdmin(_this.form)
            .then((res: any) => {
              if(res.data.status){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
              _this.$emit("closeDialog");
              _this.$emit("loadData")
              setTimeout(function (){
                _this.check = true
              },1500)
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = true
              }
            });
          }
          
      }
    });
  }


  // 获取权限组列表
  groupData (){
    adminApi.getGroupList(0,1000)
        .then((res: any) => {
          this.groupList = res.data.data.list;
        });
  }


  created() {
    this.is_status = this.isStatus;
    this.groupData();
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
